<!-- 柴油采购 -->
<template>
  <div class="contioner">
    <div class="search-form isheader" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="年份：" prop="beginDate">
          <a-year-picker
            v-model="query.beginDate"
            :style="{ width: '180px' }"
            placeholder="选择开始年份"
            class="bacClass"
          />
        </a-form-item>

        <a-form-item label="至" prop="endDate">
          <a-year-picker
            v-model="query.endDate"
            :style="{ width: '180px' }"
            placeholder="选择结束年份"
            class="bacClass"
          />
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
      <a-space>
        <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
      </a-space>
    </div>
    </div>
   
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>
    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '44%', padding: '10px' }">
      <div style="width: 100%; height: 100%">
        <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
      </div>
    </div>
    <div :style="{ height: '42%', padding: '10px' }">
      <div ref="yieldMain" class="yieldMain"></div>
    </div>
  </div>
</template>
    
    <script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { post } from '@/api/http'
import { tableColumns } from './DieselDischarging'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { Search } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
const headerShow = ref(true)

interface Pagein {
  loading: boolean
}

// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  loading: false,
})

interface Querin {
  beginDate: any
  endDate: any
  planOrderCode: string
}

//getlist初始化接口参数
let query = reactive<Querin>({
  beginDate: dayjs().subtract(1, 'year').format('YYYY'), //当天日期
  // beginDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'), //当天日期
  endDate: dayjs().subtract(0, 'year').format('YYYY'), //当天日期
  planOrderCode: '',
})
let refgridOption = ref<any>()
let configaggrid = ref({
  url: 'wms/GreyStockIn/getPage', //接口路径
  queryData: {
    //接口参数
  },
  paginationShow: false, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
})
const yieldMain = ref<any>()
let yieldInit = null
const optionQuantity = reactive<any>({
  title: {
    text: `${query.beginDate}年、${query.endDate}年各月柴油消耗情况`,
    top: '0%',
    left: '45%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '0%',
    containLabel: true,
  },
  legend: {
    data: ['数量（千升）', '金额（万元）', '单价（元/升）'],
    top: '10%',
    right: '10%',
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      interval: 50,
      axisLabel: {
        formatter: '{value}',
      },
    },
    {
      type: 'value',
      name: '',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value}.00',
      },
    },
  ],
  series: [
    {
      name: '数量（千升）',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value: Number) {
          return value
        },
      },
      label: {
        show: true,
        position: 'top',
        color: '#5470c6',
        fontSize: '12px',
      },
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
    },
    {
      name: '金额（万元）',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value: Number) {
          return value
        },
      },
      label: {
        show: true,
        position: 'top',
        color: '#91cc75',
        fontSize: '12px',
      },
      data: [3, 4, 8, 33, 17, 56, 150, 160, 60, 20, 3, 5],
    },
    {
      name: '单价（元/升）',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value: Number) {
          return value
        },
      },
      label: {
        show: true,
        position: 'top',
        color: '#fbd172',
        fontSize: '12px',
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
})
const getEcharts = () => {
  yieldInit = echarts.init(yieldMain.value)
  yieldInit.setOption(optionQuantity)
}
//获取数据
const getList = async () => {
  refgridOption.value.setQuery(query)
  console.log(refgridOption.value.getListData())
}

//初始化
onMounted(() => {
  getEcharts()
  console.log(dayjs('2022-11-22T11:19:43.533').format('YYYY-MM-DD'))
  // getList()
})
</script>
    <script lang="ts">
export default defineComponent({
  name: 'ChemicalProcurement',
})
</script>
    <style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
.yieldMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
</style>
    